<template>
  <div class="container" v-loading="loading">
    <div class="top">
      <h1>确认挂号信息</h1>
    </div>
    <div class="content">
      <!-- 选择就诊人卡片 -->
      <el-card class="card_one">
        <template #header>
          <div class="card_one_header">
            <span>请选择就诊人</span>
            <el-button type="primary" size="default" @click="addPatient">
              <SvgIcon name="add" width="16px" height="16px" />
              <span style="margin-left: 5px">添加就诊人</span>
            </el-button>
          </div>
        </template>
        <!-- 就诊人卡片 -->
        <div class="person">
          <PatientCard
            v-for="item in allPatient"
            :patient="item"
            :key="item.id"
            :isSelected="currentPatientId == item.id"
            @click="currentPatientId = item.id"
            style="margin-right: 6px"
          />
        </div>
      </el-card>
    </div>
    <!-- 底部医生信息 -->
    <div class="bottom">
      <el-card class="card_three">
        <template #header>
          <div class="card_three_header">
            <span>挂号信息</span>
          </div>
        </template>
        <!-- 医生信息展示 -->
        <el-descriptions :column="2" size="large" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊日期：</div>
            </template>
            {{ doctorInfo?.workDate }}&nbsp;
            {{ doctorInfo?.param.dayOfWeek }} &nbsp;{{
              doctorInfo?.workTime == 1 ? '下午' : '上午'
            }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊医院：</div>
            </template>
            {{ doctorInfo?.param.hosname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊科室：</div>
            </template>
            {{ doctorInfo?.param.depname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生姓名：</div>
            </template>
            {{ doctorInfo?.docname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生职称：</div>
            </template>
            {{ doctorInfo?.title }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">医生专长：</div>
            </template>
            {{ doctorInfo?.skill }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">就诊费用：</div>
            </template>
            <span style="color: hotpink; font-size: 16px">
              ￥{{ doctorInfo?.amount }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <!-- 确定挂号按钮 -->
        <template #footer>
          <!-- 当选择了就诊人信息后可以进行确定挂号 -->
          <el-button
            type="primary"
            :disabled="!currentPatientId"
            size="large"
            @click="submitOrder"
          >
            确定挂号
          </el-button>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="RegisterStepTwo">
import { reqDoctorInfo } from '@/api/hospital'
import type { Doctor } from '@/api/hospital/type'
import { reqSubmitOder } from '@/api/user'
import usePatientStore from '@/store/modules/patient'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 控制加载
let loading = ref(false)
// 获取路由对象
const route = useRoute()
// 获取路由器对象
const router = useRouter()
// 获取病人仓库
const patientStore = usePatientStore()
// 获取全部病人信息和控制场景切换的值
const { allPatient, scene } = storeToRefs(patientStore)
// 获取获取全部病人的方法
const { getAllPatient } = patientStore
// 存储当前医院的code
let hosCode = route.query.hoscode as string
// 存储当前就诊医生的id
let doctorId = route.query.doctorId as string
// 存储当前挂号医生的信息
let doctorInfo = ref<Doctor>()
// 存储当前选择的就诊人的id
let currentPatientId = ref()

// 获取当前就诊医生信息的方法
const getCurrentDoctor = async () => {
  let result = await reqDoctorInfo(doctorId)
  if (result.code == 200) {
    // 存储医生数据
    doctorInfo.value = result.data
    return 'ok'
  } else {
    ElMessage.error('获取医生信息失败')
  }
}
// 点击挂号按钮发请求获取订单号并路由跳转到订单详情页
const submitOrder = async () => {
  // 发请求获取当前订单的id
  let result = await reqSubmitOder(hosCode, doctorId, currentPatientId.value)
  if (result.code == 200) {
    // 携带订单id跳转订单详情页
    router.push({
      name: 'order',
      query: {
        orderId: result.data,
      },
    })
  } else {
    ElMessage.error('挂号失败')
  }
}
// 点击添加就诊人按钮的回调
const addPatient = () => {
  // 切换场景值
  scene.value = 1
  // 路由跳转到添加就诊人页面，并将当前路由作为query参数传递
  router.push({
    name: 'patient',
    query: {
      redirect: route.fullPath,
    },
  })
}
// 组件挂载完毕获取就诊人和医生信息
onMounted(async () => {
  // 开启加载效果
  loading.value = true
  // 获取全部就诊人信息
  await getAllPatient()
  // 获取当前就诊医生信息
  await getCurrentDoctor()
  // 关闭加载效果
  loading.value = false
})
</script>

<style scoped lang="scss">
.container {
  margin: 20px;
  color: $base-color;
  .top {
    font-size: 25px;
    color: $base-active-color;
  }
  .content {
    margin: 30px 0;
    width: 100%;
    .card_one {
      color: $base-color;
      width: 100%;
      .card_one_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
      }
      .person {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
      }
    }
  }
  .bottom {
    margin-top: -10px;
    .card_three {
      .card_three_header {
        font-size: 20px;
      }
      .cell-item {
        font-size: 16px;
      }
      :deep(.el-descriptions__cell) {
        font-size: 16px;
        color: $base-color;
      }
      :deep(.el-card__footer) {
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>
